기술 면접 5탄

1. DOCTYPE 이란 무엇인가요 ??#

DOCTYPE은 흔히 줄여말해 DTD라고 불리운다.
DTD는 Document Type Definition의 약자이다. 즉 문서형식을 정의해주는 것이다.
HTML이 어떤 버전으로 작성되었는지 미리 선언해, 웹브라우저가 내용을 올바르게 표시할 수 있도록 해주는 것이 DTD이다.

HTML5 DTD (HTML5를 따른다.)

<!DOCTYPE html>

[표준모드와 쿼크모드]

브라우저가 HTML문서를 처리할 경우, HTML DTD가 있으면 그에 맞는 W3C에서 정의한 방식에 따라 처리를 한다. 이를 표준모드라고 하고, 그렇지 않은 경우를 쿼크모드 라고 한다.

쿼크모드에서는 브라우저 회사마다 정의된 방식에 따르며, 그 결과에 차이를 보인다. 대표적으로 박스모델에서 폭(width)과 높이(height)의 여백 처리는 IE가 W3C의 표준과 달리 처리하기에 다른 결과를 보인다.

그러하기에 HTML DTD를 꼭 명시하여, 표준모드로 브라우저가 처리할 수 있게 해야 한다. 이것이 웹 표준을 위한 첫 시작이다.

2. 여러 언어로 되어 있는 콘텐츠의 페이지를 어떻게 제공 하나요 ??#

이용자가 우리에게 제공하는 최소한의 정보로 그들의 국가를 파악하고 그 국가에 맞는 언어로 페이지를 보여줘야 한다.

그렇다면 2가지가 잘 되어야 하는데, 첫번째로는 이용자의 국가를 판별하는 것, 두번째는 다국어로 된 컨텐츠들을 쳬게적으로 제공하는 방법이 있다.

이용자의 국가를 판별하는 방법#

가장 일반적으로는 HTTP 요청 헤더의 Accept-Language 정보 또는 IP로 지역을 판단하는 방법이 있다.

단, IP로 지역을 판단하는 것을 메인으로 삼는 것은 반드시 지양해야 한다. 일반적으로 어렵고 신뢰도가 낮다.

물리적으로 해당 국가에 거주하는 사람이어도 다른 언어를 사용하는 사람도 있을 수 있기 때문에 반드시 수동으로 언어 페이지를 변경할 수 있도록 해주어야 한다.

이렇게 국가를 파악 했다면, 그 국가에 맞는 컨텐츠를 제공 해야한다.

다국어 컨텐츠를 체계적으로 제공하는 방법#

웹 접근성#

먼저, 웹 접근성을 위해 HTML의 속성 중 lang에는 해당하는 언어에 맞는 값을 집어넣어야 한다. 예를 들면 한국어는 ko와 같은 값을 넣어야 하며 영어는 en과 같은 값을 넣어야 한다.

이러한 설정은 시각장애인들에게 웹 화면을 읽어주는 웹 리더가 올바르게 동작할 수 있도록 돕기도 한다.

i18n#

다국어 컨텐츠를 언어별로 제공할 때는 i18n으로 제공하는 것이 일반적이다. 각 언어별 json파일 (ko.json, en.json, jp.json 과 같은 파일)을 구성하고 i18n 라이브러리를 이용하여 언어별 페이지를 제공한다.a

언어별 차이에 대한 주의사항#

텍스트를 포함한 이미지를 사용하는 것에 대한 주의가 필요하다. 이미지에 텍스트가 포함되면 언어별로 그 이미지에 대한 텍스트를 수정하는 작업은 시간이 많이 필요한 작업이 된다.
글자 수 제한이 필요하다. 종종 한글이나 한자로 짧게 표현되는 글자도 영어나 다른 외국어로 표현하면 길게 표현되어야 하는 경우가 있다.
문화권별 색상에 대한 이해가 다르다. 이를테면 중국에서는 빨간색이 좋은 색으로 쓰이는 반면에, 다른 국가에서는 안 좋은 의미를 가질 수 있다.
날짜와 통화 형식이 다르다. 한국은 2021년 8월 18일과 같은 형식으로 표기하지만, 영어권에서는 일반적으로 June 2 2020과 같은 형식으로 표기한다.
섣불리 문자열을 concat 해서는 안된다. 이를테면 "오늘의 날짜는" + date + "입니다" 와 같은 접근방식은 좋지 않다. 언어마다 명사 동사 등의 위치가 다르다.
언어를 읽는 방향이 다를 수 있다. 전통적인 일본어는 위에서 아래로, 오른쪽에서 왼쪽으로 읽기 떄문이다.

SEO를 고려한 다국어 설정#

Google을 가정

언어별로 다른 URL을 사용한다. 크롤러는 요청 헤더에 Accept-Language를 설정하지 않고 요청을 전송하기 때문이다. 이를테면 example.com/kr, example.com/en 처럼 지정하는 것인데, 가장 최상의 방법은 example.kr과 같이 국가별 도메인을 지원하는 것이다.
한 페이지에 여러 언어를 동시에 사용하는 것을 자제한다. 크롤러는 lang속성과 URL을 통해 언어를 알아보기보다 콘텐츠 내용이 어떤 언어로 표시됐는지에 집중한다.
검색엔진 사이트에 다국어 페이지 등록 요청을 한다. 내 페이지에서 제공되는 언어가 이렇게 어떤 도메인을 통해 제공된다라고 알릴 수 있다.
페이지의 헤더 태그 내부에 <link rel="alternate" hreflang="ko" href="example.kr" /> 와 같이 hreflang 을 제공하여 내가 제공하는 언어가 어떤 것이 있는지 명시할 수 있다.

3. HTML에서 `data-` 속성은 무엇에 좋은가요 ??#

JavaScript 프레임워크, 라이브러리가 인기있기 전에, 프론트엔드 개발자는 비표준 속성, DOM 추가 프로퍼티 등의 조작없이, DOM 자체에 추가적인 데이터를 저장하기 위해 data 속성을 사용했었다. 이는 적절한 속성이나 요소가 없는 페이지나, 에플리케이션에 사용자정의 데이터를 비공개로 저장하기 위한 것이다.

요즘에는, data-속성을 사용하는 것을 권장하지 않는다. 그 이유 중 하나는 사용자가 브라우저의 inspect 기능을 사용하여 데이터 속성을 쉽게 수정할 수 있다. 데이터 모델은 Javascript 자체에 더 잘 저장되며, 라이브러리나 프레임워크의 데이터 바인딩을 통해 DOM을 업데이트된 상태로 유지하는 것이 더 낫다.

4. `cookie`, `sessionStorage`, `localStorage` 사이의 차이점을 설정해주세요.#

위 세 가지 기술은 모두 클라이언트 측에서 값을 저장하는 key-value 저장소 매커니즘이다. 모두 문자열로만 값을 저장할 수 있다.

	`cookie`	`localStorage`	`sessionStorage`
생성자	클라이언트나 서버	클라이언트	클라이언트
만료	수동으로 설정	영구적	탭을 닫을 때
브라우저 세션 전체에서 지속	만료 설정 여부에 따라 다름	O	X
모든 HTTP 요청과 함께 서버로 보냄	쿠키는 `Cookie` 헤더를 통해 자동으로 전송됨	X	X
용량 (도메인 당)	4kb	5MB	5MB
접근성	모든 윈도우	모든 윈도우	같은 탭

5. `<script>`, `<script async>`, `<script defer>` 사이의 차이 점을 설명하세요.#

<script> - HTML 파싱이 중단되고, 스크립트를 즉시 가져오고 실행되며, 스크립트 실행 후 HTML 파싱이 다시 시작된다.
<script async> - 이 스크립트는 HTML 파싱과 병렬적으로 가져오며, 가능할 때 즉시 실행된다. (아마 HTML 파싱이 끝나기전). 스크립트가 페이지의 다른 스크립트들과 독립적일 경우 async를 사용하자.
<script defer> - 이 스크립트는 HTML 파싱과 병렬적으로 가져오지만, 페이지 파싱이 끝나면 실행된다. 이 것이 여러개 있는 경우, 각 스크립트는 페이지에 등장한 순서대로 실행된다. 스크립트가 완전히 파싱된 DOM에 의존되는 경우 defer속성은 스크립트를 실행하기 전에 HTML이 완전히 파싱되도록 하는데 유용하다. <body>의 끝부분에 일반 <script>를 두는 것과 별 차이가 없다. defer 스크립트는 document.write를 포함하면 안된다.

주의! src속성이 없는 스크립트 태그는 async와 defer속성이 무시된다.

6. 왜 일반적으로 CSS `<link>` 태그를 `<head></head>` 태그 사이에 위치시키고, JS `<script>`태그를 `</body>` 직전에 위치시킬까요 ? 다른 예외적인 상황을 알고 있나요 ??#

`<head>` 안에 `<link>`를 넣는 이유#

페이지가 처음로드되면 HTML과 CSS가 동시에 파싱된다. HTML은 DOM(Document Object Model)을 만들고 CSS는 CSSOM (CSS Object Model)을 만든다. 두 가지 모두 웹사이트에서 시각적인 부분을 만드는데 필요하므로, 빠른 "first meaningful paint"를 가능하게 한다. 이 점진적 렌더링은 사이트의 성능 점수에서 측정되는 사이트 최적화의 범주이다. 문서 최하단에 스타일시트를 두는 것은 많은 브라우저에서 점진적 렌더링을 금지하게 된다. 몇몇 브라우저는 스타일이 변경되면 페이지의 요소를 다시 그리는 것을 피하기 위해 렌더링을 차단한다 그렇게 되면 사용자는 빈 하얀 페이지를 보게 된다. 그 외에도 상단에 배치하면 페이지가 점진적으로 렌더링되기 때문에 UX가 향상된다.

`</body>` 직전에 `<script>`를 넣는 이유#

<script>는 다운로드되고 실행되는 동안 HTML 파싱을 차단한다. 스크립트를 맨 아래에 두면 HTML을 먼저 파싱하여 사용자에게 표시할 수 있다.

스크립트에 document.write()가 있을 때는 <script>를 아래쪽에 두는 것이 예외적일 수 있지만, 요즘은 document.write()를 사용하지 않는 것이 좋다. 또한 <script>를 맨 아래에 두면, 브라우저는 전체 문서가 파싱될 때까지 스크립트 다운로드를 시작할 수 없다. 이렇게하면 DOM 요소를 조작해야하는 코드가 오류를 발생시키지 않고 전체 스크립트를 중지시키지 않는다.<head>에 <script>를 넣어야 하는 경우, defer 속성을 사용하자. HTML을 파싱한 후에 스크립트를 다운로드 하고 실행하는 것과 같은 효과가 있다.

7. 프로그레시브 렌더링이 무엇인가요??#

프로그레시브 렌더링이란 콘텐츠를 가능한한 빠르게 표시하기 위해 웹 페이지의 성능을 향상시키는 데 사용되는 기술이다. (특히, 인식되는 로딩 시간을 향상시켜준다.)